import { Component } from 'react';

//引入组件
import Header from './components/Header';
import List from './components/List';
import Footer from './components/Footer';


import './App.css'

export default class App extends Component {
  //初始化一个保存todo列表的状态
  state = {
    todos: [
      { id: Date.now(), content: '抽烟', done: true },
      { id: Date.now() + 1, content: '喝酒', done: false },
      { id: Date.now() + 2, content: '烫头', done: true }
    ]
  }

  render() {
    const { todos } = this.state;
    return (
      <div className='todo-container'>
        <div className='todo-wrap'>
          <Header addTodo={this.addTodo} />
          <List todos={todos} changeDone={this.changeDone} deleteTodo={this.deleteTodo} />
          <Footer deleteAllTodo={this.deleteAllTodo} todos={todos} changeAll={this.changeAll} />
        </div>
      </div>
    )
  }

  /* //修改state的done的状态
  changeDone = (id, preDone) => {
    // console.log("App中的changeDone方法", id, preDone);
    const { todos } = this.state;
    //拿到state中的每一个值，一个个的和传入的id对比，判断用户点的是哪一个
    todos.forEach((item, index) => {
      //判断id相等，则把item的done取反
      if (item.id === id) {
        item.done = !preDone;
      }
    })

    //把修改好的状态再设置回去
    this.setState({ todos: todos })
  } */



  //修改state的done的状态
  changeDone = (id, preDone) => {
    const { todos } = this.state;
    //state的值是不能直接被改变的，只能通过setState修改
    // console.log(id, preDone);
    //遍历判断用户修改的是哪一条数据
    const newTodes = todos.map(item => {

      //直接浅拷贝当前被修改的item对象，并且覆盖性的修改done的值，所以在这里并没有修改item的值
      if (item.id === id) {
        return { ...item, done: !preDone }
      }
      //在遍历数据的时候，如果某一个todo的数据和用户点击的数据不匹配，则直接返回放入map的返回值中
      return item;
    })
    this.setState({ todos: newTodes });
  }


  //发布新的todo 
  addTodo = (newTodo) => {
    const { todos } = this.state;
    // console.log("newTodo", newTodo);
    //把新得到的todo添加在state中
    this.setState({ todos: [...todos, newTodo] })
  }

  //删除某个
  deleteTodo = (id) => {
    const { todos } = this.state;

    const newTodos = todos.filter(item => {
      //判断当前的item的id如果和被删除的id不一样，则return true，放入新的数组中，否则直接过滤掉
      /* if (item.id === id) {
        return false;
      } else {
        return true;
      } */

      return item.id !== id;
    })
    //把过滤后的值添加在state上
    this.setState({ todos: newTodos })
  }


  //删除所有已完成
  deleteAllTodo = () => {
    const { todos } = this.state;
    //使用filter过滤出没有完成的数据
    const newTodos = todos.filter((item, index) => {
      return !item.done
    })
    this.setState({ todos: newTodos })
  }

  //处理全选按钮的函数
  changeAll = (flag) => {
    const { todos } = this.state;
    const newTodos = todos.map(item => {
      return { ...item, done: flag }
    })
    this.setState({ todos: newTodos })
  }


}


